<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
绑定样式：
1.class样式
写法：class="xxx" xxx可以是字符串、对象、数组
字符串写法适用于 类名不确定 要动态获取
对象写法适用于 要绑定多个样式 个数不确定 名字也不确定
数组写法适用于 要绑定多个样式 个数确定 名字也确定 但不确定用不用
2.style样式
:style="{fontSize:xxx}"其中xxx是动态值
:style="[a,b]"其中a、b是样式对象
     -->
</head>
<body>
    <style>
        .basic{
            width: 400px;
            height: 100px;
            border: 1px solid black;
        }
        .happy
        {
            background-color: blueviolet;
        }
        .sad
        {
           background-color: blue;
        }
        .normal
        {
            background-color: aquamarine;
        }
        .atguigu1
        {
            background-color: red;
        }
        .atguigu2
        {
            border-style: dashed;
        }
        .atguigu3
        {
           text-align: center;
        }
    </style>

    <div id="root">
        <!-- 两个class不行 这样才可以 绑定class样式--字符串写法 适用于：样式的类名不确定，需要动态指定 -->
        <div class="basic" :class="mood" @click="change" >test</div>
        <br><br><br><br><br><br>
        <!-- 绑定class样式--数组写法 适用于：要绑定的样式个数不确定、名字也不确定 -->
        <div class="basic" :class="arr">{{name}}</div>
        <br><br><br><br><br><br>
        <!-- 绑定class样式--对象写法 适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 -->
        <div class="basic" :class="classObj">{{name}}</div>
        <br><br><br><br><br><br>
        <div class="basic" :style="[styleObj,StyleObj2]">{{name}}</div>
    </div>

    <script src="vue.js"></script>
    <script>
        Vue.config.productionTip = false
        const vm=new Vue({
            el:'#root',
            data:{
                name:'尚硅谷g',
                mood:'normal',
                arr:['atguigu1','atguigu2','atguigu3'],
                classObj:{
                    atguigu1:false,
                    atguigu2:false
                },
                styleObj:
                {
                    fontSize:'60px',
                    color:'red'
                },StyleObj2:{
                    backgroundColor:'orange'
                }
            },
            methods: {
                change(){
                    const arr=['happy','sad','normal']
                    const index=Math.floor(Math.random()*3)  //Math.random()*3  0-3取不到3  向下取整
                    this.mood=arr[index]
                    this.classObj.atguigu1=! this.classObj.atguigu1
                    this.classObj.atguigu2= !this.classObj.atguigu2

                },

            },
        })
    </script>
</body>
</html>